<template>
    <div class="content-wrapper">
      <div class="row">
        <div class="col-12 grid-margin stretch-card">
          <div class="card">
            <div class="card-body">
              <form class="form-inline" @submit="research" @submit.native.prevent>
                  <label for="exampleSelectGender">状态：</label>
                  <div class="input-group mb-2 mr-sm-2">
                    <select class="form-control" v-model="status">
                      <option value='-1' selected>全部</option>
                      <option value="1">正常</option>
                      <option value="2">封禁</option>
                    </select>
                  </div>
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                &nbsp;&nbsp;&nbsp;
                <button type="submit" class="btn btn-primary mb-2">搜索</button>
                &nbsp;&nbsp;&nbsp;
                <button type="reset" class="btn btn-info mb-2" @click="getAll">重置</button>
              </form>
            </div>
          </div>
        </div>
      </div>
      <div class="row">
        <div class="col-md-12 stretch-card">
          <div class="card">
            <div class="card-body">
                <p class="card-title" style="font-size:30px">用户信息表</p>
                <hr>
                <div class="table-responsive">
                    <table id="recent-purchases-listing" class="table">
                        <thead>
                        <tr>
                            <th>序号</th>
                            <th>用户名</th>
                            <th>账号</th>
                            <th>密码</th>
                            <th>OpenId</th>
                            <th>手机</th>
                            <th>余额</th>
                            <th>状态</th>
                            <!-- <th>操作</th> -->
                        </tr>
                        </thead>
                        <tbody>
                        <tr v-for="(item,index) in data" :key="index">
                            <td>{{index+1}}</td>
                            <td>{{item.name}}</td>
                            <td>{{item.username}}</td>
                            <td>{{item.password}}</td>
                            <td>{{item.openid}}</td>
                            <td>{{item.phone}}</td>
                            <td>{{item.balance}}</td>
                            <td v-if="item.status === 1">正常</td>
                            <td v-else>废弃</td>
                            <!-- <td>
                                <button type="button" class="btn btn-danger btn-rounded btn-fw" @click="deletePile(item.id)">删除</button>
                            </td> -->
                        </tr>
                        </tbody>
                    </table>
                </div>
                <br>
                <div class="col-md-6">当前 {{page}} 页,总 {{pageSum}} 页,总 {{number}} 条记录
                    每页
                    <select id="pageSize" v-model="pageSize" aria-controls="DataTables_Table_0" size="1" name="DataTables_Table_0_length">
                        <option value="5" >5</option>
                        <option value="7" >7</option>
                        <option value="10" >10</option>
                    </select>
                    条记录
                </div>
                <nav aria-label="Page navigation example">
                    <ul class="pagination justify-content-end">
                        <li class="page-item"><a class="page-link" v-on:click = "changePage(1)">首页</a></li>
                        <ul class="pagination justify-content-end" v-for="index in pageSum">
                            <li class="page-item"><a class="page-link" @click = "changePage(index)">{{index}}</a></li>
                        </ul>
                        <li class="page-item"><a class="page-link" v-on:click = "changePage(pageSum)">尾页</a></li>
                    </ul>
                </nav>
            </div>
          </div>
        </div>
      </div>
    </div>
</template>

<script setup>
    import http from '../axios/http'
    import { onMounted, watch, ref } from 'vue'

    function sleep(ms) {
        return new Promise(resolve => setTimeout(resolve, ms));
    }

    let data = ref()
    let number = ref()
    let page = ref(1)
    let pageSize = ref(5)
    let pageSum = ref()
    let status = ref('-1')

    onMounted(()=>
        {
            getAll()
        }
    )

    async function getAll()
    {
      data.value = await http.get('/admin/user/page?page=1&pageSize=5')
      status.value = -1
      page.value = 1
      pageSize.value = 5
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    }

    watch(pageSize,async (pS)=>
    {
      if(status.value == -1)
      {
        data.value = await http.get('/admin/user/page?page=1&pageSize='+pS+'&status=')
      }
      else{
        data.value = await http.get('/admin/user/page?page=1&pageSize='+pS+'&status='+status.value)
      }
      page.value=1
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    })

    const changePage=async (pageNum)=>{
      if(status.value == -1)
      {
        data.value = await http.get('/admin/user/page?page='+pageNum+'&pageSize='+pageSize.value+'&status=')
      }
      else{
        data.value = await http.get('/admin/user/page?page='+pageNum+'&pageSize='+pageSize.value+'&status='+status.value)
      }

      page.value=pageNum
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
    }

    const research = async ()=>{
      if(status.value == -1)
      {
        data.value = await http.get('/admin/user/page?page=1&pageSize='+pageSize.value+'&status=')
      }
      else{
        data.value = await http.get('/admin/user/page?page=1&pageSize='+pageSize.value+'&status='+status.value)
      }
      page.value = 1
      number.value = data.value.data.data.total
      data.value = data.value.data.data.records
      pageSum.value=parseInt((number.value-1)/pageSize.value)+1
      
    }

</script>

<style scope>



</style>